<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ref,reactive响应式引用的用法和原理</title>
    <script src="../vue.global.js"></script>
</head>
<body>
<div id="root"></div>
<script>/**
 * ref, reactive响应式的引用
 * 响应式原理：通过proxy对数据进行封装，当数据发生变化时，触发模板等内容的更新
 * ref 处理基础数据类型的数据
 * reactive 处理非基础数据类型的数据[如数组，对象类型]
 * toRefs: 将对象响应式转换为属性是响应式的。proxy({name:'dell'}) => name:proxy({value:'dell'})
 */

const app = Vue.createApp({
        template: `
          <div>{{ xingming}}</div>
          <ul>
            <li v-for="item in arr">{{item}}</li>
          </ul>
        `,
        data() {
            return {}
        },
        methods: {},

        setup(props, context) {
            const {ref,reactive,readonly,toRefs} = Vue;
            let name = ref('dell');
            let arr = reactive(['dell','lee','hello'])
            let person = reactive({xingming:'yuanpengyue'})
            let readonlyArr = readonly(arr);
            setTimeout(()=>{
                name.value = 'lee'
                arr[0] = 'Hello world'
                // readonlyArr[0] = 'aaa'
                person.xingming = "乐酷yuan"
            },2000)
            const {xingming} = toRefs(person)
            return {arr, xingming}
        }
    });
    app.mount("#root");
</script>
</body>
</html>